<template>
    <view class="exam-checkbox-group" :class="bemClass">
        <slot></slot>
    </view>
</template>

<script>
export default {
    name: "exam-checkbox-group",
    props: {
        // 标识符
        name: {
            type: String,
            default: "",
        },
        // 绑定的值
        value: {
            type: [Array, Number, String],
            default: () => {
                return [];
            },
        },
        // 是否禁用全部checkbox
        disabled: {
            type: Boolean,
            default: false,
        },
        // 选中状态下的颜色
        activeColor: {
            type: String,
            default: "#2979ff",
        },
        // 禁用状态下的颜色
        disabledColor: {
            type: String,
            default: "#2979ff",
        },
        // 未选中的颜色
        inactiveColor: {
            type: String,
            default: "#c8c9cc",
        },
        // 整个组件的尺寸，默认px
        size: {
            type: [String, Number],
            default: 36,
        },
        // 是否禁止点击文本操作
        labelDisabled: {
            type: Boolean,
            default: false,
        },
        // 图标颜色
        iconColor: {
            type: String,
            default: "#ffffff",
        },
        // 图标的大小，单位px
        iconSize: {
            type: [String, Number],
            default: 24,
        },
        // 布局方式，row-横向，column-纵向
        placement: {
            type: String,
            default: "row",
        },
    },
    computed: {
        parentData() {
            return [
                this.value,
                this.disabled,
                this.inactiveColor,
                this.activeColor,
                this.disabledColor,
                this.size,
                this.labelDisabled,
                this.iconSize,
                this.placement,
            ];
        },
       bemClass() {
            return this.bem("checkbox-group", ["placement"]);
        },
         /**
         * 生成bem规则类名
         * 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
         * 故采用如下折中做法，最后返回的是数组（一般平台）或字符串（支付宝和字节跳动平台），类似['a', 'b', 'c']或'a b c'的形式
         * @param {String} name 组件名称
         * @param {Array} fixed 一直会存在的类名
         * @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
         * @returns {Array|string}
         */
        bem() {
            return function (name, fixed, change) {
                // 类名前缀
                const prefix = `exam-${name}--`;
                const classes = {};
                if (fixed) {
                    fixed.map((item) => {
                        // 这里的类名，会一直存在
                        classes[prefix + this[item]] = true;
                    });
                }

                if (change) {
                    change.map((item) => {
                        // 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
                        this[item]
                            ? (classes[prefix + item] = this[item])
                            : delete classes[prefix + item];
                    });
                }

                return (
                    Object.keys(classes)
                        // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
                        // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK
                        .join(" ");
                        // #endif
                );
            };
        },
    },
    watch: {
        // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
        parentData() {
            if (this.children.length) {
                this.children.map((child) => {
                    typeof child.init === "function" && child.init();
                });
            }
        },
    },
    data() {
        return {};
    },
    created() {
        this.children = [];
    },
    methods: {
        // 将其他的checkbox设置为未选中的状态
        unCheckedOther(childInstance) {
            const values = [];
            this.children.map((child) => {
                // 将被选中的checkbox，放到数组中返回
                if (child.isChecked) {
                    values.push(child.name);
                }
            });
            // 发出事件
            this.$emit("change", values);
            // 修改通过v-model绑定的值
            this.$emit("input", values);
        },
    },
};
</script>

<style lang="scss" scoped>
.exam-checkbox-group {
    &--row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    &--column {
        display: flex;
        flex-direction: column;
    }
}
</style>
